﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简单轮播</title>
    <style>
        *{
            padding:0;
            margin:0;
            text-decoration:none;
            list-style:none;
        }
        .container{
            width:640px;
            height:320px;
            position:relative;
            overflow:hidden;
            margin:0 auto;
        }
        .container ul{
            width:10000px;
            height:100%;
            position:relative;
        }
        .container li{
            width:640px;
            height:100%;
            float:left;
        }
        .container li a{
            width:100%;
            height:100%;
            display:inline-block;
        }
        .container .showSlide{
            width:120px;
            height:20px;
            position:absolute;
            z-index:100;
            left:42%;
            bottom:10px;
        }
        .container .showSlide span{
            display:inline-block;
            width:20px;
            height:100%;
            margin-left:6px;
            z-index:100;
            border-radius:50%;
            cursor:pointer;
            background:yellowgreen;
        }
        .container .showSlide .active{
            background:black;
        }
        .container .btn{
            width:30px;
            height:80px;
            display:none;
            font-size:30px;
            text-align:center;
            line-height:80px;
            background:rgba(0,0,0,0.1);
            color:orange;
            cursor:pointer;
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Chrome/Safari/Opera */
            -khtml-user-select: none; /* Konqueror */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
not supported by any browser  让文本不可被选中 */
            transition:all 1s ease;
            position:absolute;
            z-index:100;
            top:120px;                       /* (320-80)/2  */
        }
        .container .prev{
            left:10px;
        }
        .container .next{
            right:10px;
        }
        .container .btn:hover{
            background:rgba(0,0,0,0.6);
            color:white;
        }
    </style>
    <script src="../js/jquery-1.11.0.js"></script>
</head>
<body>
    <div class="container">
        <ul>
            <li><a href="javascript:void(0)" style="background:url(img/m-banner1.jpg)"></a></li>
            <li><a href="javascript:void(0)" style="background:url(img/m-banner2.jpg)"></a></li>
            <li><a href="javascript:void(0)" style="background:url(img/m-banner3.jpg)"></a></li>
        </ul>
        <div class="showSlide">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
        <span class="prev btn">&lt;</span>
        <span class="next btn">&gt;</span>
    </div>
</body>
    <script>
        var cont = $(".container");             //获取最外面容器——container
        var ul = cont.find("ul");               //获取ul
        var li = cont.find("li");               //获取li
        var liW = li.width();                   //获取li的宽度，即一张图片的宽度
        var liL = li.length;                   //获取li的长度,即轮播图片总数
        var dot = cont.find(".showSlide>span");  //获取轮播圆点
        var prev = cont.find(".prev");        //获取后退按钮
        var next = cont.find(".next");        //获取前进按钮
        var curIndex = 0;                     //初始化当前索引值，默认为0，即从第一张开始
        dot.on("click",function(){
            clearInterval(timer);
            $(this).addClass("active").siblings().removeClass("active");         //点击当前圆点，给当前圆点添加active的样式，其余的去掉
            var thisIndex = $(this).index();                                      //获取当前点击的圆点的索引值
            var curIndex = thisIndex;
            var move = curIndex*liW;                           //动画移动的距离
            ul.animate({right:move});                         //参照自己距离右边发生的距离变化，使之发生向左移动
        });
        function slideShow(){                               //轮播逻辑函数
            curIndex++;                                     //图片不停的切换
             if(curIndex==liL){                            //当图片是最后一张的下一张图片时
                 curIndex = 0;
             };
            dot.eq(curIndex).trigger("click");           //触发dot的click事件
        };
        timer = setInterval(slideShow,2000);
        //前进后退功能
        next.click(function(){
            clearInterval(timer);
            slideShow();                                   //逻辑上和轮播一致，所以直接调用轮播逻辑函数
        });
        prev.click(function(){
            clearInterval(timer);                            //点击的时候清除定时器,让轮播停止
            curIndex--;                                     //图片不停的切换
            if(curIndex==-1){                               //当图片是第一张的上一张图片时
                curIndex = liL-1;
            };
            dot.eq(curIndex).trigger("click");           //触发dot的click事件
        });
        //控制轮播停止与开始
        cont.hover(function(e){                           //鼠标经过容器时，轮播停止，移出后继续轮播
            $(".btn").show();                                  //轮播圆点显示
            clearInterval(timer);
        },function(){
            $(".btn").hide();                                  //轮播圆点隐藏
            timer = setInterval(slideShow,2000);
        });
    </script>
</html>